<template>
  <div class="page-container">
    <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
    <div class="scale-container">
      <!-- 顶部标题 -->
      <div class="headTitle">{{ headTitle }}</div>
      <div class="headButton" @click="backHome"></div>
      <div class="left1" @click="goToService('kunming')"></div>
      <div class="right1" @click="goToService('ningbo')"></div>
      <!-- 左边内容 -->
      <div class="left">
        <div class="box">
          <div class="headImg"></div>
          <div class="title">中汽研汽车检验中心(广州)有限公司</div>
          <div class="content">
            <img class="img1" src="/imgs/guangzhou/图层 909.png" />
            <p class="contentTitle">
              中汽研汽车检验中心（广州）有限公司（简称“广州检验中心”）是中汽中心100%全资控股子公司，成立于2016年，位于广州市增城区，是华南区域整车及零部件全领域研发验证和测试评价基地。立足“全领域试验室+试验场”的一站式服务优势，全面承接“中汽中心华南分中心”建设任务，联合标准化、政策研究等全价值链技术服务能力，共同打造成为中汽中心在华南区域开展业务布局的重要技术交流与服务平台；同时作为中汽中心落实国际化战略的关键支点，努力发展为以粤港澳大湾区为核心，辐射东南亚的区域性汽车行业智库和高端技术服务机构。
            </p>
          </div>
        </div>
        <div class="box2">
          <div class="headImg"></div>
          <div class="title">组织架构</div>
          <div class="content">
            <img class="img1" src="/imgs/guangzhou/组 7778.png" />
          </div>
        </div>
        <div class="box3">
          <div class="content">
            <div class="headImg"></div>
            <div class="title">团队情况</div>
          </div>
          <div class="content2">
            <div class="leftbox">
              <div class="box1-1">团队介绍</div>
            </div>
            <div class="rightbox">
              <div class="box1-2">
                研发人员占比<span>62%</span>，着力打造各领域的研发团队，全面建成各领域研发能力，拥有一支年轻化、专业化的精英团队。中汽中心学科后备带头人<span>5</span>人，青年科技骨干<span>32</span>人。
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="middle">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="content">
          <div class="years">2017.10</div>
          <div class="values">奠基典礼</div>
        </div>
        <div class="content2">
          <div class="years">2020.01</div>
          <div class="values">启动运营</div>
        </div>
        <div class="content3">
          <div class="years">2020.08</div>
          <div class="values">获批国家质检中心</div>
        </div>
        <div class="content4">
          <div class="years">2022.04</div>
          <div class="values">中汽中心华南分中心揭牌</div>
        </div>
        <div class="content5">
          <div class="years">2023.08</div>
          <div class="values">中汽研科技有限公司在深圳成立</div>
        </div>
        <div class="content6">
          <div class="years">2024.09</div>
          <div class="values">入选国家级专精特新“小巨人”企业</div>
        </div>
        <div class="content15">中汽研汽车检验中心（广州）有限公司</div>
        <div class="content18">
          <div class="tubiao1"></div>
          <span class="tubiaoTitle">注册资金<span class="tubiaoValue">20.7</span>亿元</span>
          <div class="tubiao2"></div>
          <span class="tubiaoTitle">占地面积<span class="tubiaoValue">577</span>亩</span>
          <div class="tubiao3"></div>
          <span class="tubiaoTitle">建筑面积<span class="tubiaoValue">9万</span>㎡</span>
          <div class="tubiao3"></div>
          <span class="tubiaoTitle">实验室面积<span class="tubiaoValue">17万</span>㎡</span>
        </div>
        <div class="content19">
          <div class="img1"></div>
          <div class="img2"></div>
          <div class="img3"></div>
          <span class="title">广州</span>
          <div class="pointImg"></div>
          <div class="img4"></div>
          <div class="img5"></div>
          <div ref="lottieRef" class="lottie-box"></div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="right">
        <div class="box">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">核心能力</div>
          </div>
        </div>
        <div class="box2">
          <div class="content">
            <div class="text">排放节能试验研究部</div>
            <div class="content1-1">轻型排放试验室</div>
            <div class="content1-1">重型排放试验室</div>
            <div class="content1-1">再生能源动力试验室</div>
            <div class="content1-1">蒸发试验室</div>
            <div class="content1-1">动力总成试验室</div>
            <div class="content1-1">化学分析试验室</div>
          </div>
          <div class="content">
            <div class="text">整车试验研究部</div>
            <div class="content1-1">道路性能测试</div>
            <div class="content1-1">静态参数测试</div>
            <div class="content1-1">安全防护测试</div>
            <div class="content1-1">蒸发试验室</div>
            <div class="content1-1">环境及可靠性</div>
          </div>
          <div class="content">
            <div class="text">智能及飞行汽车试验研究部</div>
            <div class="content1-1">环境模拟测试</div>
            <div class="content1-1">封闭场地测试</div>
            <div class="content1-1">公开道路测评</div>
            <div class="content1-1">虚拟仿真测试</div>
            <div class="content1-1">测试能力</div>
            <div class="content1-1">标准与政策研究</div>
            <div class="content1-1">低空飞行器研究及测试</div>
          </div>
          <div class="content">
            <div class="text">碰撞安全试验研究部</div>
            <div class="content1-1">实车碰撞试验</div>
            <div class="content1-1">滑台碰撞试验</div>
            <div class="content1-1">行人保护试验</div>
          </div>
          <div class="content">
            <div class="text">电磁兼容试验研究部</div>
            <div class="content1-1">整车EMC测试平台</div>
            <div class="content1-1">电驱动测试平台</div>
            <div class="content1-1">高低压部件测试平台</div>
            <div class="content1-1">瞬态及充电测试平台</div>
            <div class="content1-1">整车EMC测试</div>
            <div class="content1-1">部件EMC测试</div>
            <div class="content1-1">工程服务&技术研究</div>
          </div>
          <div class="content">
            <div class="text">新能源试验研究部</div>
            <div class="content1-1">能源系统</div>
            <div class="content1-1">电驱电控系统</div>
            <div class="content1-1">充换电系统</div>
            <div class="content1-1">燃料电池系统</div>
          </div>
        </div>
        <div class="box3">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">资质能力证书</div>
          </div>
          <!-- 第一列滚动容器 -->
          <div class="content">
            <div class="scroll-container" data-type="qualification" data-col="1">
              <div class="scroll-item">
                <img class="img1" src="/imgs/guangzhou/资质/1-1.png" />
                <p class="contentTitle">CBTL 实验室资质</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/guangzhou/资质/1-2.png" />
                <p class="contentTitle">CCC及公告资质</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/guangzhou/资质/1-3.png" />
                <p class="contentTitle">CNAS实验室认可</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <!-- 第二列滚动容器 -->
          <div class="content" style="margin-left: 1100px;">
            <div class="scroll-container" data-type="qualification" data-col="2">
              <div class="scroll-item">
                <img class="img1" src="/imgs/guangzhou/资质/2-1.png" />
                <p class="contentTitle">TÜV南德欧盟认证目击实验室资质</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/guangzhou/资质/2-2.png" />
                <p class="contentTitle">道路运输车辆达标车型检测资质</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/guangzhou/资质/2-3.png" />
                <p class="contentTitle">国家新能源汽车质量检验检测中心（广州）资质</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <!-- 第三列滚动容器 -->
          <div class="content" style="margin-left: 2100px;">
            <div class="scroll-container" data-type="qualification" data-col="3">
              <div class="scroll-item">
                <img class="img1" src="/imgs/guangzhou/资质/3-1.png" />
                <p class="contentTitle">C-NCAP、C-GCAP实验室</p>
              </div>
              <div class="scroll-item">
                <img class="img1" src="/imgs/guangzhou/资质/3-2.png" />
                <p class="contentTitle">中国船级社产品检测和试验机构认可</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
        </div>
        <div class="box4">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">科研成果</div>
          </div>
          <div class="content">
            <div class="leftbox">
              <div class="content1-1">
                <div class="img"></div>
                <div class="text">科研成果</div>
              </div>
              <div class="content1-2">
                <div class="text">广州检验中心不断强化专利、软著、EI、SCI论文等科技成果转化，参与牵头制定行业标准。</div>
                <div class="text">
                  公司现有软著9项，已授权专利<span>98</span>项（其中发明专利<span>43</span>项），申请中专利32项（其中发明专利28项），参与制定国家、行业、团体标准34余
                  项，其中已发布19项，在研标准15项。</div>
                <div class="text">现有SCI一区、二区论文2篇；EI论17篇。</div>
                <div class="text">2019年至今，广州检验中心共承担国家及省部级课题8项，公司自立课题116项。</div>
              </div>
            </div>
            <div class="rightbox">
              <div class="content1-1">
                <div class="img"></div>
                <div class="text">获奖情况</div>
              </div>
              <div class="content1-2">
                <div class="text">智能网联汽车测试与示范运营基地规划设计及技术方案研究于2019年、2021年两次获得<span>生产力促进奖(创新发展)一等奖</span></div>
                <div class="text">2024年度<span>中国质量协会质量技术奖三等奖</span></div>
                <div class="text">2024年度<span>电力科学技术进步奖一等奖</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, onUnmounted } from "vue";
import lottie from 'lottie-web';
//路由
import { useRouter } from 'vue-router'
const router = useRouter();
const headTitle = ref('中国汽车技术研究中心有限公司数字沙盘')
// 响应式数据
const lottieRef = ref(null);
let animationInstance = null;
// 响应式状态：控制弹窗显示
const showVideo = ref(false);
// 视频DOM引用（用于控制播放/暂停）
const videoRef = ref(null);
// 视频地址（待提供，先定义变量占位）
const videoUrl = ref('');
// 初始化 Lottie 动画
const initLottieAnimation = () => {
  if (lottieRef.value) {
    animationInstance = lottie.loadAnimation({
      container: lottieRef.value,
      path: '/animations/guangzhou.json',
      loop: true,
      autoplay: true,
    });
  }
};
//跳转路由
const backHome = () => {
    router.push({ name: 'home' })
}
// 修改initScrollAnimations函数，实现不同数量条目下的同步滚动
const initScrollAnimations = () => {
  const containers = Array.from(document.querySelectorAll('.scroll-container'));
  if (containers.length === 0) return;
  // 全局配置（所有容器共享的滚动节奏）
  const pauseTime = 2500; // 统一停顿时间（2.5秒）
  const scrollDuration = 500; // 统一滚动动画时间（0.5秒）
  let isAnimating = false; // 全局动画锁，防止并发滚动
  let globalTimer = null; // 全局计时器控制同步节奏
  // 为每个容器初始化独立状态（记录自己的进度）
  const containerStates = containers.map(container => {
    const items = Array.from(container.querySelectorAll('.scroll-item:not(.copy-first)'));
    const itemCount = items.length;
    // 复制第一个条目用于自己的无缝循环
    const copyFirst = container.querySelector('.copy-first');
    copyFirst.innerHTML = items[0] ? items[0].innerHTML : '';
    copyFirst.style.display = itemCount > 0 ? 'flex' : 'none';
    return {
      container, // 容器DOM
      items, // 自己的条目列表
      itemCount, // 自己的条目总数（如3或8）
      currentIndex: 0, // 自己当前的索引
      width: container.offsetWidth // 自己的宽度（支持不同列宽度）
    };
  });
  // 同步触发所有容器滚动（各自走自己的下一个索引）
  const scrollAll = () => {
    if (isAnimating) return;
    isAnimating = true;
    // 每个容器计算自己的下一个索引和目标位置
    containerStates.forEach(state => {
      if (state.itemCount === 0) return; // 无内容则不滚动
      // 计算自己的下一个索引（独立循环）
      let nextIndex = state.currentIndex + 1;
      // 目标位置：如果是最后一个条目，下一个滚动到复制的条目（用于无缝循环）
      const targetPosition = nextIndex <= state.itemCount
        ? -nextIndex * state.width
        : -state.itemCount * state.width; // 最后一个条目后，先滚动到复制的条目
      // 应用滚动（所有容器同时开始动画）
      state.container.style.transition = `transform ${scrollDuration}ms ease`;
      state.container.style.transform = `translateX(${targetPosition}px)`;
      // 更新自己的索引（临时存为nextIndex，动画结束后确认）
      state.tempNextIndex = nextIndex;
    });
    // 动画结束后处理每个容器的状态（独立复位）
    setTimeout(() => {
      containerStates.forEach(state => {
        if (state.itemCount === 0) return;
        // 如果滚动到了复制的条目（超出自己的条目总数），则无缝复位
        if (state.tempNextIndex > state.itemCount) {
          state.container.style.transition = 'none'; // 取消动画，瞬间复位
          state.container.style.transform = 'translateX(0)';
          state.currentIndex = 0; // 重置为第一个条目
          // 重新启用过渡效果（下次滚动生效）
          setTimeout(() => {
            state.container.style.transition = `transform ${scrollDuration}ms ease`;
          }, 50);
        } else {
          // 正常更新索引
          state.currentIndex = state.tempNextIndex;
        }
      });
      isAnimating = false;
      startGlobalTimer(); // 所有容器处理完后，启动下一次全局计时
    }, scrollDuration);
  };
  // 全局计时器：控制所有容器同步停顿后滚动
  const startGlobalTimer = () => {
    clearTimeout(globalTimer);
    globalTimer = setTimeout(scrollAll, pauseTime);
  };
  // 全局暂停/继续：鼠标悬停任何容器，所有容器一起暂停
  containers.forEach(container => {
    container.addEventListener('mouseenter', () => {
      clearTimeout(globalTimer);
    });
    container.addEventListener('mouseleave', () => {
      if (!isAnimating) {
        startGlobalTimer();
      }
    });
  });
  // 初始启动
  startGlobalTimer();
};
//跳转路由
const goToService = (item) => {
  router.push({ name: item })
}
onMounted(() => {
  initLottieAnimation();
  // 等待DOM完全渲染后初始化滚动动画
  nextTick(() => {
    initScrollAnimations();
  });
})
// 组件销毁时清除定时器（防止内存泄漏）
onUnmounted(() => {
});
</script>
<style scoped>
/* 在原样式基础上添加/修改以下内容 */
.right .box .content {
  /* 移除绝对定位，避免布局冲突 */
  position: relative;
  overflow: hidden;
}

/* 滚动容器设置为水平布局 */
.scroll-container {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  /* 平滑过渡效果 */
}

/* 每个滚动项占满容器宽度，确保内容居中显示 */
.scroll-item {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
}

/* 确保图片和文字不超出边界 */
.scroll-item .img1,
.scroll-item .img2 {
  max-width: 40%;
  height: auto;
  object-fit: contain;
}

.scroll-item .contentTitle {
  max-width: 50%;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* 最多显示4行 */
  -webkit-box-orient: vertical;
}

/* 隐藏复制的条目（用于无缝循环） */
.copy-first {
  display: none;
}

/* 触发区域样式（保持原有） */
.box {
  cursor: pointer;
  /* 提示可点击 */
  /* 原有样式... */
}

@keyframes sweep {
  0% {
    background-position: -100%;
  }

  100% {
    background-position: 200%;
  }
}

/* 上下浮动动画 */
@keyframes floatUpDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
    /* 向下移动20px */
  }
}

/* 视频弹窗：全屏覆盖 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 9600px;
  height: 2240px;
  background-color: rgba(0, 0, 0, 0.95);
  /* 深色背景突出视频 */
  z-index: 9999;
  /* 最高层级，覆盖所有内容 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 视频播放器：自适应全屏 */
.video-player {
  width: 9600px;
  height: 2240px;
  /* 避免超出屏幕 */
  object-fit: contain;
  /* 保持视频比例，不拉伸 */
}

/* 关闭按钮 */
.video-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s;
}

.video-close:hover {
  background-color: #ff4d4f;
  /* hover时变红，增强交互 */
}

/* 禁止页面滚动（弹窗显示时） */
:deep(body) {
  overflow: v-bind('showVideo ? "hidden" : "auto"');
}


/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
  width: 6240px;
  height: 1456px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
  width: 9600px;
  height: 2240px;
  transform: scale(0.65);
  transform-origin: 0 0;
  position: relative;
}


.lottie-box {
  z-index: 99;
  position: absolute;
  left: 969px;
  top: 386px;
  width: 885px;
  height: 889px;
  font-size: 80px;
}

.headTitle {
  text-align: center;
  position: relative;
  top: -24px;
  font-size: 130px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #FFFFFF;
  background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.left1{
  z-index: 999;
  cursor: pointer;
  top: 45%;
  left: 10px;
  position: absolute;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/left1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.right1{
  z-index: 999;
  cursor: pointer;
  position: absolute;
  top: 45%;
  right: 10px;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/right1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.headButton {
    cursor: pointer;
    display: flex;
    float: inline-end;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 78px;
    height: 78px;
    background-image: url("/imgs/ningbo/cancel.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.left {
  display: flex;

  .box {
    margin-left: 140px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        width: 1408px;
        height: 645px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
        /* line-height: 60px; */
        top: -168px;
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 34px;
        color: #FFFFFF;
      }
    }
  }

  .box2 {
    margin-left: 132px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      align-items: anchor-center;

      .img1 {
        width: 1218px;
        height: 989px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
        line-height: 60px;
        top: -98px;
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 34px;
        color: #FFFFFF;
      }
    }
  }

  .box3 {
    display: flex;
    position: absolute;
    margin-top: 1256px;
    margin-left: 132px;
    display: flex;

    .content {
      display: flex;
      height: 158px;
      width: 2247px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content2 {
      position: absolute;
      left: 40px;
      flex-wrap: nowrap;
      top: 152px;
      flex-direction: row;
      display: flex;
      justify-content: center;
      align-items: center;

      .leftbox {
        gap: 50px;
        align-self: end;
        width: 860px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: anchor-center;
        width: 135px;
        height: 421px;
        background-image: url("/imgs/guangzhou/图层 1056.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .box1-1 {
          display: flex;
          flex-direction: row;
          width: 37px;
          flex-direction: column;
          font-family: FZLanTingHeiS-B-GB;
          font-weight: 400;
          font-size: 39px;
          color: #FFFFFF;
        }
      }

      .rightbox {
        display: flex;
        gap: 20px;
        justify-content: center;
        align-items: center;
        /* 文本区与图片区间隔 */
        width: 2795px;
        height: 280px;
        background-image: url("/imgs/guangzhou/矩形 1128.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .box1-2 {
          width: 2518px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 44px;
          color: #FFFFFF;
          line-height: 97px;

          span {
            width: 155px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 79px;
            color: #FFFFFF;
            /* text-shadow: 0px 2px 4px #040000; */
            background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

      }
    }
  }
}

.middle {
  position: absolute;
  left: 3364px;
  top: 257px;
  width: 2874px;
  height: 521px;
  background-image: url("/imgs/ningbo/矩形 606.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .img1 {
    position: relative;
    left: 105px;
    top: 135px;
    width: 485px;
    height: 160px;
    background-image: url("/imgs/guangzhou/组 7809.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .img2 {
    position: relative;
    left: 800px;
    top: 20px;
    width: 1858px;
    height: 75px;
    background-image: url("/imgs/guangzhou/heng.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .content {
    top: -136px;
    left: 790px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content2 {
    top: -40px;
    left: 1150px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content3 {
    top: -284px;
    left: 1480px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content4 {
    top: -187px;
    left: 1827px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content5 {
    top: -446px;
    left: 2254px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content6 {
    top: -361px;
    left: 2569px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      width: 200px;
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }


  .content15 {
    display: flex;
    transform: translateX(100%);
    position: absolute;
    top: 420px;
    /* left: 238px; */
    font-family: FZLanTingHeiS-B-GB;
    font-weight: 400;
    font-size: 53px;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 950px;
  }

  .content18 {
    top: 550px;
    z-index: 999;
    display: flex;
    position: absolute;
    justify-content: center;
    align-content: center;
    justify-self: anchor-center;
    /* left: 97px; */
    z-index: 999;

    .tubiao1 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/guangzhou/组 7752.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao2 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/guangzhou/组 7752 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao3 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/guangzhou/组 7752 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao4 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/guangzhou/组 7752 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiaoTitle {
      margin-left: 20px;
      margin-right: 20px;
      position: relative;
      top: -29px;
      width: auto;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 42px;
      color: #FFFFFF;
      background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
      -webkit-background-clip: text;

      .tubiaoValue {
        position: relative;
        top: 9px;
        margin-left: 20px;
        margin-right: 20px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 86px;
        color: #FFFFFF;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(45deg,
            transparent 35%,
            rgba(#fff, 0.6),
            transparent 65%) no-repeat,
          currentColor;
        background-size: 50%;
        -webkit-background-clip: text;
        animation: sweep 2s infinite;
        background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .content19 {
    display: flex;
    position: absolute;
    top: 420px;
    left: 0;
    width: 2808px;
    height: 1641px;
    background-image: url("/imgs/ningbo/中间地球 2副本.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .img1 {
      position: absolute;
      left: 532px;
      top: 287px;
      width: 1467px;
      height: 1199px;
      background-image: url("/imgs/ningbo/组 7764.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img2 {
      transform: scaleX(1.5);
      position: relative;
      left: 1470px;
      top: 1220px;
      width: 143px;
      height: 157px;
      background-image: url("/imgs/guangzhou/图层 809 拷贝 2.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img3 {
      z-index: 999;
      position: relative;
      left: 1400px;
      top: 1229px;
      width: 34px;
      height: 45px;
      background-image: url("/imgs/ningbo/点位 (3).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img4 {
      position: absolute;
      left: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img5 {
      position: absolute;
      right: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      transform: scaleX(-1);
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }


    .title {
      left: 1600px;
      top: 1229px;
      position: absolute;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 38px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #E9DD7A 100%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .pointImg {
      position: absolute;
            top: 350px;
            left: 923px;
      width: 918px;
      height: 933px;
      background-image: url("/imgs/home/地图层 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.right {
  display: flex;
  position: absolute;
  flex-direction: row;
  flex-wrap: wrap;
  left: 6363px;
  top: 200px;

  .box {
    display: flex;
    flex-direction: row;
    margin-left: 73px;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }
  }

  .box2 {
    position: absolute;
    margin-left: 172px;
    display: flex;
    flex-direction: row;
    margin-top: 180px;
    gap: 20px;

    .content {
      flex-direction: column;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      /* justify-content: center; */
      /* position: absolute; */
      top: 178px;
      width: 466px;
      height: 466px;
      gap: 12px;
      background-image: url("/imgs/shanghai/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .text {
        /* width: 289px; */
        font-family: "微软雅黑粗体";
        font-size: 31px;
        color: #FFFFFF;
        background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      /* 新增：小白点样式 */
      .content1-1::before {
        content: '';
        display: inline-block;
        margin-right: 15px;
        /* 白点与文字的间距 */
        vertical-align: middle;
        width: 20px;
        height: 20px;
        background-image: url("/imgs/guangzhou/椭圆 767.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .content1-1 {
        /* 核心修改：将水平居中改为左对齐 */
        justify-content: flex-start;
        /* 增加左侧内边距，让内容从左侧有一定缩进（根据视觉效果调整） */
        padding-left: 40px;
        /* 其他原有样式保留 */
        display: flex;
        align-items: center;
        /* 保持垂直居中（白点和文字对齐） */
        width: 425px;
        height: 46px;
        background-image: url("/imgs/guangzhou/矩形 933 拷贝 13.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 25px;
        color: #FFFFFF;
        line-height: 50px;
      }
    }
  }

  .box3 {
    margin-left: 76px;
    display: flex;
    position: relative;
    top: 530px;
    flex-wrap: wrap;
    flex-direction: row;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      /* 关键：背景固定，不随内容滚动 */
      margin-top: 166px;
      margin-left: 120px;
      position: absolute;
      width: 908px;
      height: 396px;
      background-image: url("/imgs/ningbo/图层 1014 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;

      .img1 {
        width: 234px;
        height: 305px;
      }

      .img2 {
        width: 400px;
        height: 277px;
      }

      .contentTitle {
        padding: 0 20px;
        width: 300px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 63px;
        text-align: left;
      }

      /* 滚动容器：用于承载滚动内容 */
      .scroll-container {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

      /* 单个滚动项：确保内容正确显示 */
      .scroll-item {
        align-items: center;
        justify-content: space-between;
        width: 98%;
        /* height: 350px; */
        display: flex;
        align-items: center;
      }

      /* 图片和文字样式保持不变，确保在滚动项中居中 */
      .img1 {
        margin: 0 auto !important;
        width: 400px;
        height: 277px;
      }

      .img2 {
        margin: 0 auto !important;
        width: 400px;
        height: 277px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: left;
        width: 300px;
        font-size: 30px;
        text-align: center;
      }

      /* 复制的第一个条目初始隐藏 */
      .copy-first {
        display: none;
      }
    }

  }

  .box4 {
    margin-left: 172px;
    display: flex;
    flex-direction: column;
    margin-top: 920px;
    gap: 20px;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      flex-direction: row;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      gap: 20px;

      .leftbox {
        display: flex;
        flex-direction: row;
        align-items: normal;
        align-self: anchor-center;
        justify-content: space-around;
        width: 1772px;
        height: 426px;
        background-image: url("/imgs/guangzhou/矩形 937 拷贝 2.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-family: "微软雅黑常规";

        /* 新增：小白点样式 */
        .content1-2 .text::before {
          content: '';
          display: inline-block;
          margin-right: 15px;
          /* 白点与文字的间距 */
          vertical-align: middle;
          width: 20px;
          height: 20px;
          background: #49B8FF;
          border-radius: 5px;
        }

        .content1-1 {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          justify-items: anchor-center;
          gap: 40px;
    transform: translateX(-24%);
          .img {
            transform: translateX(-11%);
            width: 65px;
            height: 70px;
            background-image: url("/imgs/guangzhou/教科研成果.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .text {
            /* width: 42px; */
            writing-mode: vertical-rl;
            font-family: "微软雅黑粗体";
            font-size: 42px;
            color: #FFFFFF;
            line-height: 63px;
            background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .content1-2 {
          display: flex;
          flex-direction: column;
          justify-content: center;

          .text {
            width: 1478px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 35px;
            color: #FFFFFF;
            line-height: 64px;

            span {
              width: 81px;
              font-family: YouSheBiaoTiHei;
              font-weight: 400;
              font-size: 63px;
              color: #FFFFFF;
              background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }
      }

      .rightbox {
        display: flex;
        flex-direction: row;
        align-items: normal;
        align-self: anchor-center;
        justify-content: space-around;
        width: 1136px;
        height: 426px;
        background-image: url("/imgs/guangzhou/矩形 937 拷贝 2.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-family: "微软雅黑常规";

        /* 新增：小白点样式 */
        .content1-2 .text::before {
          content: '';
          display: inline-block;
          margin-right: 15px;
          /* 白点与文字的间距 */
          vertical-align: middle;
          width: 20px;
          height: 20px;
          background: #49B8FF;
          border-radius: 5px;
        }

        .content1-1 {
          transform: translateX(-43%);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          justify-items: anchor-center;
          gap: 40px;

          .img {
            transform: translateX(-16%);
            width: 65px;
            height: 70px;
            background-image: url("/imgs/guangzhou/教科研成果.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .text {
            /* width: 42px; */
            writing-mode: vertical-rl;
            font-family: "微软雅黑粗体";
            font-size: 42px;
            color: #FFFFFF;
            line-height: 63px;
            background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .content1-2 {
          display: flex;
          flex-direction: column;
          justify-content: center;

          .text {
            width: 900px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 35px;
            color: #FFFFFF;
            line-height: 64px;

            span {
              width: 81px;
              font-family: "微软雅黑加粗";
              font-weight: 400;
              font-size: 35px;
              color: #FF3A3A;
            }
          }
        }
      }
    }
  }
}
</style>